<template>
  <div>
    <el-alert type="warning" title="提示" show-icon>
      <div>以下是用户登录后产生的访问Token跟刷新Token，可以通过禁用操作使对应的登录信息失效。</div>
    </el-alert>
    <div class="c-h-10p"></div>
    <tokenList ref="tokenListRef" :disabled="!can('READ')" v-model:tableLoading="tableLoading">
      <template #toolbar-left>
        <el-button @click="openCacheDisabledTokenDialog" type="primary" :disabled="!can('READ')">查看缓存禁用Token</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" fixed="right" align="center" width="60">
          <template #default="{ row }">
            <el-button size="mini" type="text" @click="disable(row)"
              :disabled="row.isDisabled || !can('EDIT')">禁用</el-button>
          </template>
        </el-table-column>
      </template>
    </tokenList>
    <cache-disabled-token-dialog ref="cacheDisabledTokenDialogRef" @close-saved="getData" />
  </div>
</template>
<script setup>
import tokenList from "@/components/sys/token/list.vue"
import cacheDisabledTokenDialog from "@/components/sys/token/cacheDisabledTokenDialog.vue";
import { ElMessageBox } from "element-plus";
import { ref, onMounted, useTemplateRef } from "vue";
import { can } from "@/utils/permission";
import tokenApi from "@/api/sys/token"

onMounted(async () => {
  await getData()
})
const tableLoading = ref(false)
const cacheDisabledTokenDialogRef = useTemplateRef("cacheDisabledTokenDialogRef")
const tokenListRef = useTemplateRef("tokenListRef")

const getData = () => {
  tokenListRef.value.getData();
}

const openCacheDisabledTokenDialog = () => {
  cacheDisabledTokenDialogRef.value.open()
}
const disable = async (row) => {
  await ElMessageBox.confirm(
    "你确定要禁用此Token吗，这将导致对应的登录信息失效",
    "提示",
    {
      type: "warning",
    }
  );
  tableLoading.value = true;
  const res = await tokenApi.disableToken(row.accessToken);
  if (res.code != 0) {
    tableLoading.value = false;
    return;
  }
  await getData();
}
</script>
